<template>
	<view class="goods_cart_container">
		<navigator class="navigator_nav"
			:url="`/modules/goodModule/pages/goods/detail/detail?goodsId=${_goodItem.goodItem.id}`">
			<!-- 商品图片 -->
			<image class="good_img" :src="`${_goodItem.goodItem.imageUrl}`" mode="widthFix" />

			<!-- 商品详细信息 -->
			<view class="goods_item_info">
				<!-- 商品名称 -->
				<text class="goods_item_info_name">{{_goodItem.goodItem.name}}</text>
				<!-- 商品描述 -->
				<text class="goods_item_info_promo">{{_goodItem.goodItem.floralLanguage}}</text>
				<!-- 商品价格 -->
				<view class="goods_item_info_bottom">
					<view class="goods_item_info_price">
						<text class="text">¥</text>{{_goodItem.goodItem.price}}
					</view>
					<view class="goods_item_info_origin_price">
						<text class="text">¥</text> {{_goodItem.goodItem.marketPrice}}
					</view>
					<!-- 加入购物车图片 -->
					<view class="goods_item_info_btn">
						<image class="goods_image" src="@/static/images/buybtn.png" mode="" />
					</view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script setup>
	let _goodItem = defineProps(['goodItem'])
</script>

<style lang="scss" scoped>
	/* components/goods-card/goods-card.wxss */

	.goods_cart_container {
		width: 350rpx;
		margin-top: 18rpx;
		background: #fff;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.4);
		border-radius: 18rpx;
	}

	.good_img {
		width: 100%;
		max-height: 360rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	}

	.goods_item_info {
		display: flex;
		flex-direction: column;
		padding: 10rpx 20rpx;
	}

	.goods_item_info .goods_item_info_name {
		font-weight: 600;
		font-size: 30rpx;
		line-height: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goods_item_info .goods_item_info_promo {
		padding-top: 20rpx;
		padding-bottom: 3px;
		font-size: 12px;
		color: #71797f;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goods_item_info_bottom {
		display: flex;
		line-height: 50rpx;
		margin-top: 20rpx;
	}

	.goods_item_info_bottom .goods_image {
		width: 48rpx;
		height: 48rpx;
	}

	.goods_item_info_price {
		font-size: 30rpx;
		font-weight: bold;
		color: #f3514f;
	}

	.goods_item_info_price .text {
		font-size: 24rpx;
		padding-right: 4rpx;
		font-weight: normal;
	}

	.goods_item_info_origin_price {
		flex: 1;
		font-size: 20rpx;
		color: #71797f;
		text-decoration-line: line-through;
		margin-left: 6%;
		margin-top: 4rpx;
	}

	.goods_item_info_origin_price .text {
		font-size: 20rpx;
	}
</style>